<template>
	<view v-if="showList" :style="theme">
		<view class="tabs">
			<!-- #ifdef MP-WEIXIN -->
			<u-navbar :placeholder="true">
				<view slot="left" class="nav_title">
					<text style="z-index: 10;">进出场</text>
				</view>
			</u-navbar>
			<!-- #endif -->
			<view class="flex">
				<view v-if="shopHome == 1 && venueInfo && venueInfo.name" @click="show = true" style="width: 50%;box-sizing: border-box;padding-left: 20rpx;" class="f30 c3 fwb flex">
				   {{venueInfo.name}}
				   <u-icon name="arrow-right" size="28rpx" color="#333"></u-icon>
				</view>
				<view class="flex-1">
				<u-tabs :list="tabList" lineHeight="1" :scrollable="false"
					:activeStyle="{ fontWeight: 'bolder', fontSize: '28rpx', color: '#222222' }"
					:inactiveStyle="{ fontSize: '28rpx' }" @click="tabclick" :current="active"></u-tabs>
				</view>
			</view>
		</view>
		<view v-if="active == 0" class="u-warning warning_title mt20">显示当前时间可用进场凭证,未到开始时间、过期或未生效凭证不显示</view>
		<view class="box" v-if="list && list.length != 0">
			<view v-if="active == 0" class="box_piao">
				<view class="box_piao_item" v-for="(item, index) in list" :key="index">
					<view class="zbx" :class="item.type=='42'?'ck':item.type=='32'?'cd':''"></view>
					<image class="box_piao_item_i" :src="imgHost+'/jinchu_ic_ticket.png'"></image>
					<view class="box_piao_item_h">
						<view class="box_piao_item_h_left">
							<view>
								{{item.name}}
								<!-- #ifdef MP -->
								<button v-if="item.type=='32'||item.type=='42'" class="share shares" open-type="share"
									:data-data="item" style="margin-left: 10rpx;">
									<image :src="imgHost+'/ticket_ic_share.png'"></image>
									<text>分享</text>
								</button>
								<!-- #endif -->
							</view>
							<view>
								{{item.itemName?item.itemName: ''}}{{item.areaName?' | ' + item.areaName:''}}{{item.siteModelName?' | ' + item.siteModelName:''}}
							</view>
							<button class="share" v-if="item.useTime">
								使用时间：{{item.useTime}}
							</button>
							<view v-if="!item.useTime && item.residueDegree">
								使用情况：{{item.mealsType === '1'?item.expirationTime + '过期':'剩余'+ item.residueDegree + '次 | ' + item.expirationTime + '过期'}}
							</view>
							<view class="share" v-if="!item.useTime && !item.residueDegree && item.expirationTime">
								使用情况：{{item.expirationTime + '过期'}}
							</view>
						</view>
						<view class="box_piao_item_h_right" @click="jumpCode(item.code)">
							<image :src="imgHost+'/jinchu_ic_saoma.png'"></image>
							<text>扫码</text>
						</view>
					</view>
				</view>

			</view>
			<view v-else class="box_piao">
				<view class="box_piao_item" v-for="(item, index) in list" :key="index">
					<view class="zbx" :class="item.type=='42'?'ck':item.type=='32'?'cd':''"></view>
					<image class="box_piao_item_i" :src="imgHost+'/jinchu_ic_ticket.png'"></image>
					<view class="box_piao_item_h">
						<view class="box_piao_item_h_left">
							<view>
								{{item.name}}
								<!-- #ifdef MP -->
								<button v-if="item.type=='32'||item.type=='42'" class="share shares" open-type="share"
									:data-data="item" style="margin-left: 10rpx;">
									<image :src="imgHost+'/ticket_ic_share.png'"></image>
									<text>分享</text>
								</button>
								<!-- #endif -->
							</view>
							<view>
								{{item.itemName?item.itemName: ''}}{{item.areaName?' | ' + item.areaName:''}}{{item.siteModelName?' | ' + item.siteModelName:''}}
							</view>
							<view class='share' v-if="item.inTime" style="margin-top: 10rpx;">
								入场时间：{{item.inTime}}{{item.timeOut?' 已超时'+item.timeOut + '分钟':''}}</view>
							<view style="margin-top: 10rpx;" v-if="item.validName && item.validValue">
								{{item.validName}}：{{ item.validValue}}
							</view>
						</view>
						<view class="box_piao_item_h_right" @click="jumpCode(item.code)">
							<image :src="imgHost+'/jinchu_ic_saoma.png'"></image>
							<text>扫码</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无数据～</view>
		</view>
		<u-picker :defaultIndex="defaultIndex" :show="show" :columns="venueList" keyName="name" @confirm="confirm"
			@cancel="show = false"></u-picker>
	</view>
</template>
<script>
	// #ifdef H5
	import wx from '@/common/jweixin.js';
	// #endif
	export default {
		data() {
			return {
				defaultIndex: [0],
				show: false,
				tabList: [{
						key: '2',
						name: '进场'
					},
					{
						key: '3',
						name: '出场'
					}
				],
				showList: false,
				venueInfo: {},
				venueList: [],
				active: 0,
				list: []
			}
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			jumpCode(code) {
				if(this.venueInfo && this.venueInfo.name) {
					this.jump('/pages/venue/ewm?code=', code + "&venName=" + this.venueInfo.name)
				} else {
					this.jump('/pages/venue/ewm?code=', code)
				}
			},
			getCG() {
				this.$app.ajax({
					data: {
						param: {
							openStatus: '1'
						}
					},
					api: this.$api.getVenue()
				}).then((res) => {
					if (res.errorCode === '000000') {
						let arr = res.recordList
						let index = 0
						if (this.venueInfo) {
							arr.forEach((e, dex) => {
								if (e.id === this.venueInfo.id) {
									index = dex
								}
							})
						}
						this.venueList = [res.recordList]
						this.venueInfo = res.recordList[index]
						this.getList()
					}
				}).catch(() => {})
			
			},
			confirm(e) {
				this.venueInfo = this.venueList[0][e.indexs[0]]
				this.show = false
				this.getList()
			},
			// 发起获取signature请求
			getSignature() {
				var url = location.href.split('#')[0];
				this.$app.ajax({
					data: {
						param: {
							path: url
						}
					},
					api: this.$api.wxpConfig()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.setShare(res.record)
					}
				}).catch(() => {})
			},
			// 设置分享数据
			setShare(signature) {
				let that = this
				var url = location.href.split('?')[0]
				uni.setStorageSync('signature', JSON.stringify(signature))
			
				wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					// 配置微信 JSSDK
					appId: signature.appId, // 必填，公众号的唯一标识
					timestamp: signature.timestamp, // 必填，生成签名的时间戳
					nonceStr: signature.nonceStr, // 必填，生成签名的随机串
					signature: signature.signature, // 必填，签名
					jsApiList: ['scanQRCode', 'checkJsApi',	'chooseImage','updateAppMessageShareData', 'updateTimelineShareData']
				})
			
				wx.ready(function() {
					console.log('这是分享功能')
					wx.updateAppMessageShareData({
						// imgUrl: that.fxImg, // 分享图标
						title: '进出场', // 分享标题
						desc: that.cont.name, // 分享描述
						link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						success: function() {
							console.log('我来分享了')
						}
					})
					wx.updateTimelineShareData({
						title: '进出场', // 分享标题
						desc: that.cont.name, // 分享描述
						link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						// imgUrl: that.fxImg, // 分享图标
						success: function() {
							console.log('我来分享了')
						}
					})
				})
				wx.error((res) => {
					console.log(res)
					// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
					// that.getSignature()
				})
			},
			//分享
			shareBtn() {
			// 	const _signature = uni.getStorageSync('signature')
			// 	// 先看看缓存里有没有
			// 	if (_signature) {
			// 		let signature = JSON.parse(_signature)
			// 		// 获取当前时间戳
			// 		var now = parseInt(new Date().getTime() / 1000) + ''
			// 		// 计算两个时间戳之间的差值，单位为秒
			// 		var diff = now - signature.expire_time
			
			// 		// 判断差值是否大于2小时的秒数，即7200秒
			// 		if (diff > 7200) {
			// 			console.log('时间戳已经超过两小时。')
			// 			this.getSignature()
			// 		} else {
			// 			console.log('时间戳未超过两小时。')
			// 			this.setShare(signature)
			// 		}
			// 	} else {
			// 		this.getSignature()
			// 	}
			},
			tabclick(e) {
				this.active = e.index;
				this.getList()
			},
			// 进出场列表
			getList() {
				this.showList = true
				this.$app.ajax({
					api: this.$api.accessCode(),
					data: {
						userId: this.userInfo.id,
						param: {
							stadiumId: this.shopHome == 1?this.venueInfo.id: this.venueId,
							lat: '',
							flag: this.active || 0,
							lng: '',
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.list = res.recordList || []
					}
				}).catch(() => {})
			}
		},
		onShareAppMessage(e) {
			if (e.from == 'button') {
				let a = e.target.dataset.data
				let name = a.name
				let venueName = this.venueName
				let time = a.useTime || a.expirationTime + '过期'
				let stra = a.itemName || ''
				let strb = a.areaName || ''
				let strc = a.siteModelName || ''
				let xm = stra + ' | ' + strb + ' | ' + strc
				let title = this.userInfo.nickName + '分享给您的进出场凭证'
				let imageUrl = this.imgHost + '/img_share.png'
				return {
					title: title,
					path: `/pages/venue/receive?id=${a.code}&name=${name}&time=${time}&venueName=${venueName}&xm=${xm}`,
					imageUrl: imageUrl
				}
			} else {
				return {
					title: '进出场',
					path: '/pages/venue/entranceAndExit' // 路径，传递参数到指定页面。
				}
			}
		}

	}
</script>
<style scoped lang="scss">
	.warning_title{
		padding: 0 32rpx;
		margin-bottom: -10rpx;
	}
	.tabs {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 999;
	}

	.box_tabls {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		background: #ffffff;
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
	}

	.box_tabls_right {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: $bjColor;
	}

	.box_tabls_left {
		display: flex;
		overflow: hidden;
		flex-wrap: wrap;
	}

	.box_tabls_left_item {
		padding: 0 46rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #111111;
		background: $bjColor;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
	}

	.active {
		color: #ffffff !important;
		background: $color !important;
	}

	.box_piao {
		padding: 24rpx 30rpx;
		box-sizing: border-box;
	}

	.box_piao_item {
		position: relative;
		width: 100%;
		margin-bottom: 25rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.box_piao_item_i {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		bottom: 0;
		right: 0;
	}

	.box_piao_item_h {
		width: 100%;
		z-index: 10;
		flex: 1;
		padding: 30rpx 0 30rpx 30rpx;
		box-sizing: border-box;
	}

	.box_piao_item_h {
		display: flex;
		justify-content: space-between;
	}

	.box_piao_item_h_left {
		width: 76%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.box_piao_item_h_left .share {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		border: none;
		background: none;
		width: 100%;
		text-align: left;
		padding: 0;
	}

	.box_piao_item_h_left .share text {
		color: $color;
	}

	.box_piao_item_h_left .share::after {
		border: none;
	}

	.box_piao_item_h_left image {
		width: 22rpx;
		height: 22rpx;
		margin-left: 5rpx;
		margin-right: 5rpx;
		vertical-align: middle;
	}

	.shares {
		display: inline;
		width: 100rpx;
	}

	.box_piao_item_h_right {
		width: 24%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.box_piao_item_h_right image {
		width: 60rpx;
		height: 60rpx;
	}

	.box_piao_item_h_right view {
		font-size: 20rpx;
		font-weight: 400;
		color: #333333;
		margin-top: 10rpx;
	}

	.box_piao_item_h_left view:nth-child(1) {
		font-size: 32rpx;
		font-weight: 500;
		color: #222222;
	}

	.box_piao_item_h_left view:nth-child(2) {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
	}

	.box_piao_item_h_left view:nth-child(3) {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}

	.zbx {
		position: absolute;
		left: 0;
		top: 0;
		width: 10rpx;
		background-color: $color;
		bottom: 0;
	}

	.zbx.ck {
		background-color: rgb(0, 191, 151);
	}

	.zbx.cd {
		background-color: #4F76D4;
	}
</style>